<template>
  <div class="container"  style="padding: 0px">
  <el-card class="box-card" style="height: inherit;padding-bottom: 20px" >
    <div slot="header" class="clearfix">
      <span class="el-icon-document">已办任务</span>
      <el-button style="float: right;" size="mini" type="danger" @click="goBack">关闭</el-button>
    </div>
    <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
      <!--表单信息-->
      <el-tab-pane label="表单信息" name="1">
        <el-col :span="16" :offset="4" v-if="variableOpen">
          <div class="test-form">
            <v-form-render :key="new Date().getTime()" ref="vFormRef" :form-json="variablesData" :form-data="formData"
                           :option-data="optionData">
            </v-form-render>
          </div>
        </el-col>
      </el-tab-pane>
      <!--流程流转记录-->
      <el-tab-pane label="流转记录" name="2">
        <el-col :span="16" :offset="4">
          <div class="block">
            <el-timeline>
              <el-timeline-item
                  v-for="(item,index ) in flowRecordList"
                  :key="index"
                  :icon="setIcon(item.finishTime)"
                  :color="setColor(item.finishTime)"
              >
                <p style="font-weight: 700">{{ item.taskName }}</p>
                <el-card :body-style="{ padding: '10px' }">
                  <el-descriptions class="margin-top" :column="1" size="small" border>
                    <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <UserFilled></UserFilled>
                          </el-icon>
                          办理人
                        </div>
                      </template>
                      {{ item.assigneeName }}
                      <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <UserFilled></UserFilled>
                          </el-icon>
                          候选办理
                        </div>
                      </template>
                      {{ item.candidate }}
                    </el-descriptions-item>
                    <el-descriptions-item label-class-name="my-label">
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <Stopwatch/>
                          </el-icon>
                          接收时间
                        </div>
                      </template>
                      {{ item.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <Stopwatch/>
                          </el-icon>
                          处理时间
                        </div>
                      </template>
                      {{ item.finishTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <Timer/>
                          </el-icon>
                          耗时
                        </div>
                      </template>
                      {{ item.duration }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                      <template #label>
                        <div class="cell-item">
                          <el-icon>
                            <Tickets/>
                          </el-icon>
                          >处理意见
                        </div>
                      </template>
                      {{ item.comment.comment }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="流程图" name="3">
        <flow :flowData="flowData"/>
      </el-tab-pane>
    </el-tabs>
  </el-card>
  </div>
</template>
<script setup lang="ts">
import flow from '@/views/admin/task/finishedprocessdeatil/flow.vue'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {fetchData, saveorUpadateDate} from "@/api/index";
import {ref, reactive, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";

let route = useRoute()
let router = useRouter()
let store = useStore()
let vFormRef = ref(null)
let xmlData = ref("")
let flowData = ref([])
let optionData = reactive({})
let formData = ref({})
let activeName = ref("1")
let deptName = ref(undefined)
let userList = ref(null)
let defaultProps = reactive({
  children: "children",
  label: "label"
})
let queryParams = reactive({
  deptId: undefined
})
let loading = ref(true)
let flowRecordList = ref([])
let formConfCopy = reactive({})
let src = ref(null)
let rules = reactive({})
let variablesForm = reactive({})
let taskForm = reactive({
      returnTaskShow: false, // 是否展示回退表单
      delegateTaskShow: false, // 是否展示回退表单
      defaultTaskShow: true, // 默认处理
      comment: "", // 意见内容
      procInsId: "", // 流程实例编号
      instanceId: "", // 流程实例编号
      deployId: "",  // 流程定义编号
      taskId: "",// 流程任务编号
      procDefId: "",  // 流程编号
      targetKey: "",
      variables: {
        variables: {}
      },
    }
)
let assignee = ref(null)
let formConf = reactive({})
let variables = ref([])
let variablesData = ref({})
let returnTaskList = ref([])
let completeTitle = ref(null)
let completeOpen = ref(false)
let returnTitle = ref(null)
let returnOpen = ref(null)
let rejectOpen = ref(null)
let rejectTitle = ref(null)
let userData = ref(null)
let checkSendUser = ref(false)
let checkSendRole = ref(false)
let checkType = ref("single")
let taskName = ref(null)
let startUser = ref(null)
let multiInstanceVars = ref("")
let formKeyExist = ref(false)
let submittaskForm = ref(null)
let variableOpen=ref(false)

onMounted(() => {
  load()
})
const load = () => {
  if (route.query) {
    taskForm.deployId = route.query && route.query.deployId;
    taskForm.taskId  = route.query && route.query.taskId;
    taskForm.procInsId = route.query && route.query.procInsId;
    // 流程任务获取变量信息
    if (taskForm.taskId) {
      processVariables(taskForm.taskId)
    }
    getFlowRecordList(taskForm.procInsId, taskForm.deployId);
  }
}
const handleClick = (tab: any, event: any) => {
  if (tab.paneName === '3') {
    fetchData("/process/flowable/task/flowXmlAndNode/", {
      procInsId: taskForm.procInsId,
      deployId: taskForm.deployId
    }).then(res => {
      flowData.value = res;
    })
  }
}

const setIcon = (val: any) => {
  if (val) {
    return "el-icon-check";
  } else {
    return "el-icon-time";
  }
}
const setColor = (val: any) => {
  if (val) {
    return "#2bc418";
  } else {
    return "#b3bdbb";
  }
}
const getFlowRecordList = (procInsId: any, deployId: any) => {
  const params = {procInsId: procInsId, deployId: deployId}
  fetchData("/process/flowable/task/flowRecord", params).then(res => {
    flowRecordList.value = res.flowList;
  }).catch(res => {
    goBack();
  })
}
/** 获取流程变量内容 */
const processVariables=(taskId:any)=>{
  if (taskId) {
    // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
    fetchData(`/process/flowable/task/processVariables/${taskId}`).then(res => {
      variablesData.value = res.formJson;
      formData.value=res
      variableOpen.value = true
    });
  }
}
const goBack = () => {
  // 关闭当前标签页并返回上个页面
  store.dispatch('tagsView/delRouterView', {
    "path":"/admin/task/finishedprocess",
  })
  router.push("/admin/task/finishedprocess")
}
</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
</style>